<template>
	<view class="search-content">
		<u-search placeholder="输入商品名称" v-model="val" @custom="confirm(val)" @search="searchname(val)"></u-search>
		<view class="goods-list">
			<view class="left-bar">
				<div class="itemStyle" v-for="(item,index) in barList" @click="changeItem(index)">
					<p :class="activeIndex==index?'activeStyle':'normalStyle'">{{item.name}}</p>
				</div>
			</view>
			<view class="right-content">
				<div class="item-title">
					<p @click="changeAll('1')" :class="active == '1'?'activeClass':''">全部</p>
					<p @click="changeNum('2')" :class="active == '2'?'activeClass':''">销量
						<u-icon name="arrow-up" :color="color1" size="18"></u-icon>
						<u-icon name="arrow-down" :color="color2" size="18"></u-icon>
					</p>
					<p @click="changeIntegral('3')" :class="active == '3'?'activeClass':''">积分
						<u-icon name="arrow-up" :color="color3" size="18"></u-icon>
						<u-icon name="arrow-down" :color="color4" size="18"></u-icon>
					</p>
				</div>
				<div class="goods-content">
					<view v-for="item in flowList" :key="item.id" class="demo-warter">
						<image @click="godetail(item)" class="goodsImage" :src="item.product_image"
							:index="index"></image>
						<p class="remaining">剩余:{{item.remaining_amount}}</p>
						<view class="demo-title">
							{{item.name}}
						</view>
						<view class="demo-price">
							{{item.integral}}积分
						</view>
						<view class="demo-tag">
							<view v-if="item.remaining_amount>0" class="demo-tag-owner"
								@click="exchange(item.id)">
								兑换
							</view>
							<view v-else class="demo-tag-owner-over">
								已兑完
							</view>
						</view>
					</view>
					<!-- <u-waterfall v-model="flowList" ref="uWaterfall">
						<template v-slot:left="{leftList}">

							<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
								<image @click="godetail(item)" class="goodsImage" :src="item.product_image"
									:index="index"></image>
								<p class="remaining">剩余:{{item.remaining_amount}}</p>
								<view class="demo-title">
									{{item.name}}
								</view>
								<view class="demo-price">
									{{item.integral}}积分
								</view>
								<view class="demo-tag">
									<view v-if="item.remaining_amount>0" class="demo-tag-owner"
										@click="exchange(item.id)">
										兑换
									</view>
									<view v-else class="demo-tag-owner-over">
										已兑完
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<image @click="godetail(item)" class="goodsImage" :src="item.product_image"
									:index="index"></image>
								<p class="remaining">剩余:{{item.remaining_amount}}</p>
								<view class="demo-title">
									{{item.name}}
								</view>
								<view class="demo-price">
									{{item.integral}}积分
								</view>
								<view class="demo-tag">
									<view v-if="item.remaining_amount>0" class="demo-tag-owner"
										@click="exchange(item.id)">
										兑换
									</view>
									<view v-else class="demo-tag-owner-over">
										已兑完
									</view>
								</view>
							</view>
							<view>
							</view>
						</template>
					</u-waterfall> -->
				</div>
			</view>
		</view>
		<image v-if="flowList.length<1" class="nodata-img" src="../static/assets/image/no-data.png" mode=""></image>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	export default {
		data() {
			return {
				barList: [{
					id: '',
					name: '全部分类'
				}],
				activeIndex: 0,
				color1: '#979797',
				color2: '#979797',
				color3: '#979797',
				color4: '#979797',
				active: '1',
				count: 1,
				countIngeral: 1,
				flowList: [],
				personInfo: '',
				name: '',
				num: '', //销量 0 低 1 高
				integral: '', //积分 0 低 1 高
				val: ''
			}
		},
		onShow() {
			this.personInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.barList = [{
				id: '',
				name: '全部分类'
			}]
			this.getgoodsTypeList()
			this.getgoodsList('', '', '', '')
		},
		methods: {
			godetail(item) {
				uni.navigateTo({
					url: `/pagesB/integral/ordersDetail?name=${item.name}&image=${item.product_image}&count=${item.remaining_amount}&off_date=${item.off_date}&integral=${item.integral}&id=${item.id}`
				})
			},
			//搜索
			searchname(val) {
				//this.clear()
				this.getgoodsList(val, '', this.num, this.integral)
			},
			//搜索
			confirm(val) {
				//this.clear()
				this.getgoodsList(val, '', this.num, this.integral)
			},
			changeItem(index) {
				this.activeIndex = index
				//this.clear()
				this.getgoodsList('', this.barList[index].id, this.num, this.integral)
			},
			changeAll(e) {
				this.val = ''
				this.active = e
				this.color1 = '#979797'
				this.color2 = '#979797'
				this.color3 = '#979797'
				this.color4 = '#979797'
				this.num = ''
				this.integral = ''
				// this.getgoodsList('', '', '', '')
				this.getgoodsList('', this.barList[this.activeIndex].id, this.num, this.integral)
			},
			changeNum(e) {
				this.val = ''
				this.integral=''
				this.active = e
				this.color3 = '#979797'
				this.color4 = '#979797'
				let isOdd = (this.count++) % 2 == 0 ? true : false
				if (isOdd == false) {
					this.color1 = 'red'
					this.color2 = '#979797'
					this.num = '1'

				} else {
					this.color1 = '#979797'
					this.color2 = 'red'
					this.num = '0'

				}
				//this.clear()
				this.getgoodsList('', this.barList[this.activeIndex].id, this.num, '')
			},
			changeIntegral(e) {
				this.val = ''
				this.num = ''
				this.active = e
				this.color1 = '#979797'
				this.color2 = '#979797'
				let isOdd = (this.countIngeral++) % 2 == 0 ? true : false
				console.log(isOdd)
				if (isOdd == false) {
					this.color3 = 'red'
					this.color4 = '#979797'
					this.integral = '1'
				} else {
					this.color3 = '#979797'
					this.color4 = 'red'
					this.integral = '0'
				}
				//this.clear()
				this.getgoodsList('', this.barList[this.activeIndex].id, '', this.integral)
			},
			getgoodsTypeList() {
				// name,type,state,num,integral
				api.goodsList('redeem.product', '_api_page_list', this.personInfo.access_token, '', '', '', '')
					.then(res => {
						this.barList = [...this.barList, ...res.type]
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			//商品列表
			getgoodsList(name, type, num, integral) {
				//this.clear()
				this.flowList = []
				api.goodsList('redeem.product', '_api_page_list', this.personInfo.access_token, name, type, num,
						// getgoodsList(name, type, state, num, integral) {
						// 	api.goodsList('redeem.product', '_api_page_list', this.personInfo.access_token, name, type, state, num,
						integral)
					.then(res => {
						this.flowList = res.data
						// this.$forceUpdate()
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			//兑换商品
			exchange(id) {
				uni.showModal({
					title: '是否确认兑换',
					success: (res) => {
						if (res.confirm) {
							api.exchangegood('redeem.product', '_api_exchange_product_one', this.personInfo
									.access_token, '1', id,
									this.personInfo.uid)
								.then(res => {
									if (res.message == '已达到最大兑换数量,不可再次兑换！') {
										uni.showToast({
											icon: 'none',
											title: res.message
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: res.message
										})
										this.getgoodsList('', this.barList[this.activeIndex].id, '', this
											.num,
											this.integral)
									}
								}).catch(e => {
									uni.showToast({
										icon: 'none',
										title: e.message
									})
								})
						}
					}
				})

			},
			//清除瀑布流的数据缓存
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style scoped lang="less">
	.search-content {
		padding-top: 30rpx;
		height: 100vh;

		.nodata-img {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
		}

		/deep/ .u-search {
			border-radius: 50rpx;
			border: 4rpx solid #DB3C4D !important;
			margin: 0rpx 10rpx !important;
			margin-bottom: 30rpx !important;
		}

		/deep/ .u-action {
			width: 132rpx;
			height: 64rpx;
			background: linear-gradient(146deg, #FE4D60 0%, #FF7C89 100%);
			border-radius: 31rpx;
			color: #FFFFFF;
			line-height: 62rpx;
			// margin-top: -4rpx;
		}

		.goods-list {
			height: 89vh;
			width: 100%;
			display: flex;

			.left-bar {
				width: 14%;
				background: #F4F6F8;
				height: 89vh;
				padding-top: 30rpx;

				.itemStyle {
					height: 150rpx;

					.activeStyle,
					.normalStyle {
						height: 100rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
					}

					.normalStyle {
						padding: 15rpx 24rpx;
						color: #333333;
					}

					.activeStyle {
						padding: 15rpx 20rpx;
						border-left: 4rpx solid #DB3C4D;
						background: #FFFFFF;
						color: #DB3C4D;
					}
				}

				.itemStyle:nth-child(2),
				// .itemStyle:nth-child(3),
				.itemStyle:nth-child(4) {
					line-height: 75rpx;
				}
			}
		}

		.right-content {
			width: 86%;
			overflow: hidden;
			overflow-y: scroll;
			.goods-content{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				
				>view{
					// flex: 1;
					// width: 50%;
					width: 46%;
				}
			}
			.goods-content:after{
			    content: '';
			    width: 46%;
			    // border:1px solid transparent;
			  }

			.goodsImage {
				width: 265rpx;
				height: 300rpx;
			}

			.demo-warter {
				border-radius: 8px;
				border: 1px solid #E3E3E3;
				margin: 5px;
				background-color: #ffffff;
				padding: 8px;
				position: relative;
				margin-top: 20rpx;
			}

			.remaining {
				position: absolute;
				top: 54%;
				left: 33%;
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #000000;
				border-radius: 20rpx;
				opacity: 0.6;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}

			.demo-image {
				width: 100%;
				border-radius: 4px;
			}

			.demo-title {
				font-size: 30rpx;
				margin-top: 5px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				max-width: 260rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.demo-tag {
				display: flex;
				margin-top: 5px;
			}

			.demo-tag-owner {
				background: linear-gradient(146deg, #FE4D60 0%, #FF7C89 100%);
				color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 10rpx 25rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-owner-over {
				background: #A9A9A9;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 10rpx 25rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-text {
				border: 1px solid blue;
				color: blue;
				margin-left: 10px;
				border-radius: 50rpx;
				line-height: 1;
				padding: 4rpx 14rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				font-size: 20rpx;
			}

			.demo-price {
				font-size: 30rpx;
				color: #E96D37;
				margin-top: 5px;
			}

			.demo-shop {
				font-size: 22rpx;
				color: #999999;
				margin-top: 5px;
			}

			.demo-warter {
				border-radius: 8px;
				border: 1px solid #E3E3E3;
				margin: 5px;
				background-color: #ffffff;
				padding: 8px;
				position: relative;
				margin-top: 20rpx;
			}

			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}

			.demo-image {
				width: 100%;
				border-radius: 4px;
			}

			.demo-title {
				font-size: 30rpx;
				margin-top: 5px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.demo-tag {
				display: flex;
				margin-top: 5px;
			}

			.demo-tag-owner {
				background: linear-gradient(146deg, #FE4D60 0%, #FF7C89 100%);
				color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 10rpx 25rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-text {
				border: 1px solid blue;
				color: blue;
				margin-left: 10px;
				border-radius: 50rpx;
				line-height: 1;
				padding: 4rpx 14rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				font-size: 20rpx;
			}

			.demo-price {
				font-size: 30rpx;
				color: #E96D37;
				margin-top: 5px;
			}

			.demo-shop {
				font-size: 22rpx;
				color: #999999;
				margin-top: 5px;
			}

			.item-title {
				height: 80rpx;
				// border: 1px solid red;
				display: flex;

				p {
					font-size: 26rpx;
					width: 80rpx;
					margin-left: 60rpx;
					line-height: 80rpx;
					position: relative;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					/deep/ u-icon:nth-child(1) {
						position: absolute;
						top: 22rpx;
						right: 0;
					}

					/deep/ u-icon:nth-child(2) {
						position: absolute;
						bottom: 22rpx;
						right: 0;
					}
				}

				.activeClass {
					color: #000000;
				}
			}
		}
	}
</style>
